//color && bgcolor
$color: (
	black : #000000,
	white : #FFFFFF,
	green1: #314a43,
	green2: #70887d,
	gary: #c8c5c1
);

@each $key, $value in $color {
	.text-#{$key} {
		color: $value;
	}
	.bg-#{$key} {
		background-color: $value;
	}
}

@each $value in (left,center,right) {
	.text-#{$value} {
		text-align: $value;
	}
}

//flex
.d-flex {
	display: flex;
}
.flex-1 {
	flex: 1;
}
.flex-wrap {
	flex-wrap: wrap;
}

$flex-jc: (
	start: flex-start,
	end: flex-end,
	center: center,
	between: space-between,
	around: space-around
);
@each $key,$value in $flex-jc {
	.jc-#{$key} {
		justify-content: $value;
	}
}

$flex-ai: (
	start: flex-start,
	end: flex-end,
	center: center
);
@each $aiKey,$aiVal in $flex-ai {
	.ai-#{$aiKey} {
		align-items: $aiVal;
	}
}

//text-size
$text-size-base: 1rem;
$text-size: (
	xs: 0.8,
	xxs: 0.9,
	s: 1,
	m: 1.1,
	l: 1.2,
	bl: 1.8
);
@each $key, $val in $text-size {
	.text-#{$key} {
		font-size: $val * $text-size-base;
	}
}
.letter-s {
	letter-spacing: 2px;
}

//margin padding mt mx m
$spacing-types: (
	m: margin,
	p: padding
);
$spacing-directions: (
	t: top,
	r: right,
	b: bottom,
	l: left
);
$spacing-sizes: (
	0: 0,
	1: 0.25,
	2: 0.5,
	3: 1,
	4: 1.5,
	5: 3,
	6: 4.75,
	7: 8.75
);
$space-size-base: 1rem;

@each $typeKey, $typeVal in $spacing-types {
	@each $directionKey,$directionVal in $spacing-directions {
		@each $sizeKey, $sizeVal in $spacing-sizes {
			//mt-0
			.#{$typeKey}#{$directionKey}-#{$sizeKey} {
				#{$typeVal}-#{$directionVal}: $sizeVal * $space-size-base;
			}
		}
	}
	@each $sizeKey, $sizeVal in $spacing-sizes {
		//mx-0
		.#{$typeKey}x-#{$sizeKey} {
			#{$typeVal}-left: $sizeVal * $space-size-base;
			#{$typeVal}-right: $sizeVal * $space-size-base;
		}
		//my-0
		.#{$typeKey}y-#{$sizeKey} {
			#{$typeVal}-top: $sizeVal * $space-size-base;
			#{$typeVal}-bottom: $sizeVal * $space-size-base;
		}
		//m-0
		.#{$typeKey}-#{$sizeKey} {
			#{$typeVal}: $sizeVal * $space-size-base;
		}
	}
}

$text-weight: (
	1: 100,
	2: 200,
	3: 300,
	4: 400,
	5: 500,
	6: 600,
	7: 700,
	8: 800,
	9: 900
);
@each $Key, $Value in $text-weight {
	.text-weight-#{$Key} {
		font-weight: $Value;
	}
}

//position
.position-a {
	position: absolute;
}
.position-r {
	position: relative;
}
$position-sizes: (
	0: 0,
	1: 0.25,
	2: 0.5,
	3: 1,
	4: 1.5,
	5: 3
);
$position-size-base: 1rem;
@each $directionVal in (left, top, right, bottom) {
	@each $Key, $Value in $position-sizes {
		.#{$directionVal}-#{$Key}{
			#{$directionVal}: $Value * $position-size-base;
		}
	}
}

.w100 {
	width: 100%;
}

.h100 {
	height: 100%;
}

.nav-active {
	color: #000;
	border-bottom: 2px solid #000;
}

.singer-category-active {
	color: white;
	background-color: black;
	border-radius: 0.6rem;
}

//z-index
$z-index: (
	1: 1,
	2: 2,
	3: 3
);
@each $key, $val in $z-index {
	.z-#{$key} {
		z-index: $val;
	}
}